<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="/xlive/script/xlv.js"></script>
</head>
<body >
        <div id="test_main" xlvobject="xlv.obj.pane" >
            <div>
                 <div xlvobject="xlv.obj.webObject" 
                 	  xlvprop="{name:'menu', objectURL:'rst.order.menu',methodName:'list'}"
                 	  xlvmethod="{
                 	  	returnDataManage:function(clone){
                 	  		var menu_node=this.xml_selectSingleNode('properties/menu');
                 	  		var p_xml=this.xml_properties;
                 	  		 if(this.xml_responseMethodNames()=='list'){
								var return_data_node=this.xml_selectSingleNode('list/return/data',p_xml.responseXML.documentElement);
								var menu_node=this.xml_selectSingleNode('properties/menu');
								while(menu_node.first_node)xlv.sys.dispose(menu_node.first_node,true);
								while(return_data_node.firstChild) menu_node.appendChild(this.xml_adoptNode(return_data_node.firstChild));
							}else if(this.xml_responseMethodNames()=='list-product'){
								var return_data_node=this.xml_selectSingleNode('list-product/return/data',p_xml.responseXML.documentElement);
								var catalog_key=this.getValue('list-product/catalog-key');
								var menu_products_node=this.xml_selectSingleNode('properties/menu/title/catalogs/catalog[key=\''+catalog_key+'\']/products');
								while(menu_products_node.firstChild) xlv.sys.dispose(menu_products_node.firstChild,true);
								while(return_data_node.firstChild) menu_products_node.appendChild(this.xml_adoptNode(return_data_node.firstChild));
								menu_products_node.setAttribute('xlv_got','true');
							}else{
								this.$self('returnDataManage',clone);
							}
                 	  	},
                 	  	selectCatalog:function(catalog_key){
                 	  		var got = this.getValue('menu/title/catalogs/catalog[key=\''+catalog_key+'\']/products/@xlv_got');
            				if(!got){
            					this.setValue(catalog_key,'list-product.catalog-key');
            					this.webMethod('list-product');
            				}
            				return (got)?true:false;
                 	  	}
			 			}"
                 ></div>
                 <div xlvobject="xlv.obj.tree" xlvprop="{dmName:'menu'}"
                 ></div>
                 
                 <div xlvobject="xlv.obj.process" xlvprop="{title:'set-title'}"
            	 	xlvmethod="{
            	 		process:function(){
            	 			var dm = this.getDataModel('menu');
            	 			dm.webMethod('set-title');
            	 		}
            	 	}"
            	 
            	></div>
                 <div xlvobject="xlv.obj.process" xlvprop="{title:'set-catalog'}"
            	 	xlvmethod="{
            	 		process:function(){
            	 			var dm = this.getDataModel('menu');
            	 			dm.webMethod('set-catalog');
            	 		}
            	 	}"
            	 
            	></div>
                 <div xlvobject="xlv.obj.process" xlvprop="{title:'set-product'}"
            	 	xlvmethod="{
            	 		process:function(){
            	 			var dm = this.getDataModel('menu');
            	 			dm.webMethod('set-product');
            	 		}
            	 	}"
            	 
            	></div>
                 <div xlvobject="xlv.obj.process" xlvprop="{title:'set-bom'}"
            	 	xlvmethod="{
            	 		process:function(){
            	 			var dm = this.getDataModel('menu');
            	 			dm.webMethod('set-bom');
            	 		}
            	 	}"
            	 
            	></div>
                 <div xlvobject="xlv.obj.process" xlvprop="{title:'list-product'}"
            	 	xlvmethod="{
            	 		process:function(){
            	 			var dm = this.getDataModel('menu');
            	 			dm.webMethod('list-product');
            	 		}
            	 	}"
            	 
            	></div>
            </div>
            <style>
            	#menu {list-style:none;margin:0px;padding:0px;cursor:default;overflow:hidden}
            	#catalogs {list-style:none;margin:8px;padding:0px;cursor:default;overflow:hidden;display:none}
            </style>
            <div>
            	<div id="menuContainer">
            		<ul id="menu" xlvobject="xlv.obj.viewer" xlvprop="{dmName:'menu'}"
            			xlvmethod="{
            				construct:function(){
            					this._pattern=xlv.util.findChild(this,{id:'title'},false,false);
            					if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
            				},
            				initial:function(){
            					this.$self('initial');
            					this.addEventHandler('click','_click');
            				},
            				_click:function(event){
            					var li=this.targetElement(event.target,{tag:'li'});
            					if(!li)return;
            					if(li.id=='catalog'){
            						var key=xlv.util.getXmlNodeValue('key',li.$P.catalogNode);
            						var got=this.getDataModel('menu').selectCatalog(key);
            						if(got){
            							this.$V.productsObject=(this.$V.productsObject||this.getObjectById('products'));
            							this.$V.productsObject.build(key);
            						}
            					}
            					if(li.id=='title') {
            						var doexpand=true;
            						var children=xlv.util.children(this,{tag:'li'},false,false);
									for(var i=0,n=children.length;i &lt; n;++i){
										if(Element.hasClassName(children[i],'expanded')){
											if(li==children[i])doexpand=false;
											Element.removeClassName(children[i],'expanded');
											var ul2=xlv.util.findDirectChild(children[i],{tag:'ul'},false,false);
											if(ul2){
												var close={element:ul2,style:{height:0},duration:100};
												close.finished=function(){
													close.element.style.display='none';
													close.element.style.height='';
												};
												xlv.util.queueStyleEffect(close);
											}
										}
									}
									var ul=xlv.util.findDirectChild(li,{tag:'ul'},false,false);
									if(doexpand &amp;&amp; ul) {
										Element.addClassName(li,'expanded');
										ul.style.display='none';
										ul.style.height='';
										var dim=Element.getDimensions(ul);
										var effect={element:ul,style:{height:dim.height},duration:300};
										effect.setup=function(){
											ul.style.height='0px';
											ul.style.display='block';
										};
										effect.finished=function(){
											ul.style.display='block';
											ul.style.height='';
										};
										xlv.util.queueStyleEffect(effect);
									}
            					}
            				},
            				mvc_afterModelChanged:function(dm,notify,memo){
            					if(notify=='setChanged' &amp;&amp; memo.methods=='list')this.build();
            				},
            				build:function(){
            					while(this.firstChild)xlv.sys.dispose(this.firstChild,true);
            					var dm=this.getDataModel();
            					var titles = dm.xml_selectNodes('properties/menu/title');
            					for(var i=0;i &lt; titles.length;++i){
            						var title=xlv.sys.clonePatternNode(this._pattern);
            						this.appendChild(title);
            						title.$P.titleNode=titles[i];
            						xlv.sys.initialize(title);
            					}
            				}
            			}"
            		>
            			<li id="title" xlvobject="xlv.obj.generic" 
            				xlvmethod="{
            					initial:function(){
            						var tnode=this.$P.titleNode;
            						var name=xlv.util.findChild(this,{id:'name'});
            						var icon=xlv.util.findChild(this,{id:'icon'});
            						xlv.util.setElementValue(name,xlv.util.getXmlNodeValue('name',tnode));
            						var catalogs=xlv.util.findChild(this,{id:'catalogs'},false,false);
            						catalogs.$P.titleNode=this.$P.titleNode;
            						xlv.sys.initialize(catalogs);
            					}
            				}"
            			>
            				<div><img id="icon" src=""/><span id="name"></span></div>
            				<ul id="catalogs" xlvobject="xlv.obj.generic"
            					xlvmethod="{
            						construct:function(){
            							this._pattern=xlv.util.findChild(this,{id:'catalog'},false,false);
            							if(this._pattern) this._pattern.parentNode.removeChild(this._pattern);
            						},
            						initial:function(){
            							var tnode=this.$P.titleNode;
            							var catalogs=xlv.util.selectXmlNodes('catalogs/catalog',tnode);
            							for(var i=0;i &lt; catalogs.length;++i){
            								var catalog=xlv.sys.clonePatternNode(this._pattern);
            								this.appendChild(catalog);
            								catalog.$P.catalogNode=catalogs[i];
            								xlv.sys.initialize(catalog);
            							}
            						}
            					}"
            				>
            					<li id="catalog" xlvobject="xlv.obj.generic"
            							xlvmethod="{
            								initial:function(){
            									this.$self('initial');
            									var cnode=this.$P.catalogNode;
            									var icon=xlv.util.findChild(this,{id:'icon'},false,false);
            									var name=xlv.util.findChild(this,{id:'name'},false,false);
            									var desc=xlv.util.findChild(this,{id:'desc'},false,false);
            									xlv.util.setElementValue(name,xlv.util.getXmlNodeValue('name',cnode));
            									desc.innerHTML=xlv.util.getXmlNodeValue('desc-html',cnode);
            								}
            							}"
            					>
            						<div><img id="icon"/><span id="name"></span><br/><span id="desc"></span>
            						</div>
            					</li>
            				</ul>
            			</li>
            		</ul>
            	</div>
            	<div id="productContainer">
            		<ul id="products" xlvobject="xlv.obj.viewer" xlvprop="{dmName:'menu'}"
            			xlvmethod="{
            				construct:function(){
	           					this._pattern=xlv.util.findChild(this,{id:'product'},false,false);
            					if(this._pattern)this._pattern.parentNode.removeChild(this._pattern);
            				},
            				initial:function(){
            					this.$self('initial');
            					this.addEventHandler('click','_click');
            				},
            				_click:function(event){
            				},
            				mvc_afterModelChanged:function(dm,notify,memo){
            					if(notify=='setChanged' &amp;&amp; memo.methods=='list-product'){
            						var catalog_key=dm.getValue('list-product.catalog-key');
            						this.build(catalog_key);
            					}
            				},
            				build:function(catalog_key){
            					while(this.firstChild)xlv.sys.dispose(this.firstChild,true);
            					var dm=this.getDataModel();
            					var ps = dm.xml_selectNodes('properties/menu/title/catalogs/catalog[key=\''+catalog_key+'\']/products/product');
            					for(var i=0;i &lt; ps.length;++i){
            						var product=xlv.sys.clonePatternNode(this._pattern);
            						this.appendChild(product);
            						product.$P.productNode=ps[i];
            						xlv.sys.initialize(product);
            					}
            				}
            			}"
            		>
            			<li id="product" xlvobject="xlv.obj.generic"
            							xlvmethod="{
            								initial:function(){
            									this.$self('initial');
            									var pnode=this.$P.productNode;
            									var icon=xlv.util.findChild(this,{id:'icon'},false,false);
            									var name=xlv.util.findChild(this,{id:'name'},false,false);
            									var desc=xlv.util.findChild(this,{id:'desc'},false,false);
            									xlv.util.setElementValue(name,xlv.util.getXmlNodeValue('name',pnode));
            									desc.innerHTML=xlv.util.getXmlNodeValue('desc-html',pnode);
            								}
            							}"
            			>
            				<div>
            					<img id="icon"/><span id="name"></span><br/><span id="desc"></span>
            				</div>
            			</li>
            		</ul>
            	</div>
            </div>
            
        </div>
</body>
</html>
